<template>
	<picker :value="multiIndex" :range="multiArray" range-key="name" class="picker" mode="multiSelector"
		@columnchange="bindMultiPickerChange" @change="selectModel">
		<input type="text" disabled :value="areas.province?(areas.province + '-' +areas.city+ '-' +areas.area):''" class="input"
			placeholder="省-市-区" />
	</picker>
</template>

<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		name: "hs-select-adress",
		props: {
			defaultAreas: {
				type: Object,
				default: ()=>{}
			},
		},
		watch: {
			defaultAreas(newValue, oldValue) {
				this.areas = {
					province:newValue.province,
					city:newValue.city,
					area:newValue.area,
				}
			}
		},
		data() {
			return {
				multiIndex: [0, 0, 0],
				multiArray: [],
				areas:{},
			};
		},
		computed: {
			...mapGetters(['areaOptions'])
		},
		methods: {
			setList() {
				this.multiArray = [this.areaOptions, this.areaOptions[0].childList, this.areaOptions[0].childList[0]
					.childList
				]
				console.log(this.multiArray);
			},
			bindMultiPickerChange(e) {
				if (e.detail.column == 0) {
					this.multiArray = [this.areaOptions, this.areaOptions[e.detail.value].childList, this.areaOptions[e
						.detail.value].childList[0].childList]
				}
				if (e.detail.column == 1) {
					this.multiArray = [this.areaOptions, this.multiArray[1], this.multiArray[1][e.detail.value].childList]
				}
			},
			selectModel(e) {
				this.multiIndex = e.detail.value
				this.areas = {
					province:this.multiArray[0][this.multiIndex[0]].name,
					city:this.multiArray[1][this.multiIndex[1]].name,
					area:this.multiArray[2][this.multiIndex[2]].name
				}
				this.$emit('selectAreas',this.areas)
			}
		},
		created() {
			this.setList()
		}
	}
</script>

<style lang="scss" scoped>
	.picker {
		flex: 1;

		.input {
			height: 74rpx;
			background-color: #F6F6F6;
			border-radius: 26rpx;
			padding: 0 35rpx;
			flex: 1;
			margin: 15rpx 0 0 15rpx;
			line-height: 74rpx;

			&.textarea {
				height: 187rpx;
				line-height: 1.5;
				padding: 23rpx 35rpx;
				box-sizing: border-box;
			}
		}
	}
</style>